<template>
    <!-- 往来单位-新增 -->
    <div class="e-form">
        <div class="tabs">
            <div class="tabs-title">基本信息</div>
            <div style="width: 100%" class="form">
                <el-form
                    :model="formData"
                    ref="formData"
                    :rules="rules"
                    label-width="150px"
                >
                <BillTop title="往来单位新增" @cancel="handleClose"></BillTop>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item
                                label="单位类型"
                                prop="businessUnitTypeValue"
                            >
                                <el-select
                                    v-model="formData.businessUnitTypeValue"
                                    placeholder="请选择"
                                    @change="businessUnitTypeChange"
                                >
                                    <el-option
                                        v-for="item in unitList"
                                        :key="item.kvId"
                                        :label="item.kvKey"
                                        :value="item.kvValue"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="业务类型"
                                prop="businessTypeValue"
                            >
                                <el-select
                                    :disabled="
                                        formData.businessUnitTypeValue == ''
                                    "
                                    v-model="formData.businessTypeValue"
                                    placeholder="请选择"
                                    @change="businessTypeKeyChange"
                                >
                                    <el-option
                                        v-for="item in businessList"
                                        :key="item.kvId"
                                        :label="item.kvKey"
                                        :disabled="item.disabled"
                                        :value="item.kvValue"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item
                                v-if="formData.businessUnitTypeValue == '0'"
                                label="身份证号码"
                                prop="creditCode"
                                key="1"
                            >
                                <el-input
                                    key="11"
                                    :disabled="formData.businessTypeValue == ''"
                                    placeholder="请填写"
                                    v-model="formData.creditCode"
                                    maxlength="18"
                                ></el-input>
                            </el-form-item>
                            <el-form-item
                                v-else-if="
                                    formData.businessUnitTypeValue == '6'
                                "
                                label="机构编码"
                                key="2"
                            >
                                <el-input
                                    key="22"
                                    disabled
                                    v-model="formData.creditCode"
                                    maxlength="18"
                                ></el-input>
                            </el-form-item>
                            <el-form-item
                                v-else
                                label="统一社会信用代码"
                                prop="creditCode"
                                key="3"
                            >
                                <el-input
                                    key="33"
                                    :disabled="formData.businessTypeValue == ''"
                                    placeholder="请填写"
                                    v-model="formData.creditCode"
                                    maxlength="18"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="单位名称"
                                prop="businessUnitName"
                            >
                                <el-input
                                    :placeholder="
                                        formData.businessUnitTypeValue == '6'
                                            ? '请选择单位名称'
                                            : '请填写单位名称'
                                    "
                                    v-model="formData.businessUnitName"
                                    :disabled="
                                        formData.businessUnitTypeValue == '6'
                                    "

                                >
                                    <i
                                        v-if="
                                            formData.businessUnitTypeValue ==
                                            '6'
                                        "
                                        slot="suffix"
                                        class="el-icon-document-copy"
                                        @click="onFbUnit"
                                    ></i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="联系人">
                                <el-input
                                    placeholder="请填写"
                                    v-model="formData.contactName"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系电话">
                                <el-input
                                    placeholder="请填写"
                                    v-model="formData.contactTel"
                                    maxlength="11"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item
                                label="注册地址"
                                prop="registerAddInfo"
                            >
                                <SelectAddr
                                    v-model="formData.registerAddInfo"
                                    @getLabel="getAddrLabel"
                                    lazy
                                    showCountry
                                    style="width: 100%"
                                ></SelectAddr>
                                <!-- 详细地址 -->
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮箱" >
                                <el-input
                                    placeholder="请填写"
                                    v-model="formData.email"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="录入人">
                                {{ formData.founderName }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="录入机构">
                                {{ formData.orgName }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="是否启用">
                                <el-switch
                                    :width="60"
                                    v-model="formData.state"
                                    class="main-el-switch"
                                    active-color="#13ce66"
                                    inactive-color="#D2D2D2"
                                    active-value="1"
                                    inactive-value="0"
                                    active-text="启用"
                                    inactive-text="禁用"
                                >
                                </el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="buttons">
            <el-button
                type="primary"
                style="background: #2e61d7"
                @click="save()"
                >保存</el-button
            >
            <el-button @click="cancel()">取消</el-button>
        </div>
    </div>
</template>

<script>
import SelectAddr from '@/components/common/addrComp'
import '@/utils/jquery.scrollTo.min'
import { mapMutations } from 'vuex'
// import { showSuccessPop } from '@/utils/common'
import call from '@/api/OutsourcingartyAdmin/getAllType.js'
import Withtheunit from '@/api/OutsourcingartyAdmin/Withtheunit/Withtheunit.js'
import { selectDataClient } from '@/utils/common'
export default {
    data () {
        return {
            //表单数据
            formData: {
                businessUnitTypeKey: '', //单位类型名称
                businessUnitTypeValue: '', //单位类型id
                businessTypeKey: '', //业务类型名称
                businessTypeValue: '', //业务类型id
                creditCode: '', //统一社会信用代码
                businessUnitName: '', //单位名称
                contactName: '', //联系人
                contactTel: '', //联系电话
                registerAddInfo: '', //注册地址详情
                email: '', //邮箱
                founderName: '', //录入人
                founderId: '', //录入人id
                orgId: '', //录入机构id
                orgName: '', //录入机构名字
                state: '1' //启用【0：不启用，1启用】
            },

            businessList: [],
            unitList: [],
            orgId: '', //机构id
            orgName: '', //机构名称
            isSkip: false, //是否跳转
            // 验证
            rules: {
                // 统一社会信用代码
                creditCode: [
                    {
                        required: true,
                        validator: this.creditCodeVolide,
                        trigger: ['blur', 'change']
                    }
                ],
                //单位类型
                businessUnitTypeValue: [
                    {
                        required: true,
                        message: '请选择单位类型',
                        trigger: 'change'
                    }
                ],
                //业务类型
                businessTypeValue: [
                    {
                        required: true,
                        message: '请选择业务类型',
                        trigger: 'change'
                    }
                ],
                //单位名称
                businessUnitName: [
                    {
                        required: true,
                        message: '请输入单位名称',
                        trigger: 'blur'
                    }
                ],
            }
        }
    },

    components: {
        SelectAddr
    },
    created () {
        this.getBusinesseData() //获取往来单位类型
        let data = JSON.parse(localStorage.getItem('vuex'))
        this.formData.founderName = data.userInfo.userName
        this.formData.founderId = data.userInfo.userNumber
        this.formData.orgId = data.userInfo.orgInfo.orgId
        this.formData.orgName = data.userInfo.orgInfo.orgName
    },
    mounted () {},
    beforeDestroy () {},
    methods: {
        ...mapMutations(['setPopConfirm']),
        // 获取注册地址
        getAddrLabel (val) {
            this.formData.registerAdd = val
        },
        //获取业务类型数据
        getBusinesseData () {
            call.getCredential('往来单位业务类型').then(res => {
                // 筛选掉内部结算
                this.businessList =  res.filter(item=>{
                    if(item.kvValue != 1) {
                        return item
                    }
                })
            })
            call.getCredential('往来单位类型').then(res => {
                this.unitList = res
            })
        },
        //保存按钮
        async save () {
            this.$refs.formData.validate(async valid => {
                if (valid) {
                    let datas = JSON.parse(JSON.stringify(this.formData))
                    let data = await Withtheunit.WiththeunitAdd(datas)
                    if (data.code != 200) {
                        this.clientPop(
                            'info',
                            '保存成功！是否进行下一步操作？',
                            this.gocallback(data),
                            null,
                            this.cancelCallBack(data)
                        )
                    } else {
                        this.clientPop('err', '保存失败')
                    }
                } else {
                    return false
                }
            })
        },
        // 保存成功继续回调
        gocallback (billid) {
            return () => {
                this.$router.push({
                    path: '/WiththeunitEdit',
                    query: { billid }
                })
            }
        },
        // 保存成功，取消回调
        cancelCallBack (billid) {
            return () => {
                this.$router.push({
                    path: '/Withtheunit',
                    query: { billid }
                })
            }
        },
        //取消按钮
        cancel () {
            this.$router.push('/Withtheunit')
        },
        //单位类型选择
        businessUnitTypeChange (val) {
            this.formData.businessTypeValue = '' //重置业务类型
            this.formData.businessTypeKey = '' //重置业务类型
            this.formData.creditCode = '' //重置信用代码/身份证/编码
            this.unitList.map(item => {
                if (item.kvValue == val) {
                    this.formData.businessUnitTypeKey = item.kvKey
                }
            })
            // 如果单位类型为内部
            if (val == '6') {
                this.businessList.map(newItem => {
                    if (newItem.kvValue != '6' && newItem.kvValue != '5') {
                        newItem.disabled = true
                    } else {
                        newItem.disabled = false
                    }
                })
            } else {
                this.businessList.map(newItem => {
                    if (newItem.kvValue == '6' || newItem.kvValue == '5') {
                        newItem.disabled = true
                    } else {
                        newItem.disabled = false
                    }
                })
            }
        },
        //业务类型选择
        businessTypeKeyChange (val) {
            this.businessList.map(item => {
                if (item.kvValue == val) {
                    this.formData.businessTypeKey = item.kvKey
                }
            })
        },
        ...mapMutations(['setSelectedInfo']),
        // 分包商弹窗选择详情
        onFbUnit () {
            // 弹窗选择数据
            selectDataClient({
                SelectServiceToken: '/hr/org/getAllOrgPage', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id
                InitParamsStr: '',
                Title: '往来单位选择'
            }).then(val => {
                // 保存用户选择返回数据到store
                // this.setSelectedInfo(val)
                // // 客户端弹窗预览结果
                // // 参数依次为: 打开页面地址、标题、回调函数
                // openAppClient('/showSelectedData', '选择结果', function () {
                //     // alert('关闭后回调')
                // })
                this.formData.businessUnitName = val[0].orgName
                this.formData.creditCode = val[0].shortCode
            })
        },
        creditCodeVolide (rule, value, callback) {
            const fn = () => {
                if (this.formData.businessUnitTypeValue !== '0') {
                    let creditCodeReg =
                        /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/
                    if (!value) {
                        return new Error('统一信用代码不能为空')
                    } else if (!creditCodeReg.test(value)) {
                        return new Error(
                            '请输入18位数字或者大写字母，但是字母不包括 I、O、Z、S、V'
                        )
                    } else {
                        return
                    }
                } else {
                    let creditCodeReg =
                        /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                    if (!value) {
                        return new Error('身份证不能为空')
                    } else if (!creditCodeReg.test(value)) {
                        return new Error('请输入18位并正确的身份证号码')
                    } else {
                        return
                    }
                }
            }
            callback(fn())
        },

    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    margin-bottom: 80px;
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}

.e-table {
    background: #fff;
}

.el-tab-pane {
    margin-left: -10px;
}
::v-deep .clearPadding .vxe-cell {
    padding: 0;
}
::v-deep .clearPaddingLeft .vxe-cell {
    padding-left: 0px;
}
::v-deep {
    .main-el-switch {
        position: relative;
        .el-switch__core {
            height: 24px;
            border-radius: 12px;
            &:after {
                left: 4px;
                top: 3px;
            }
        }
        &.el-switch {
            &.is-checked {
                .el-switch__core {
                    &:after {
                        margin-left: -20px;
                        left: 100%;
                    }
                }
            }
        }
        &.is-checked {
            .el-switch__label--left {
                opacity: 0;
            }
            .el-switch__label--right {
                opacity: 1;
            }
        }
        .el-switch__label {
            position: absolute;
            top: 0;
        }
        .el-switch__label--left {
            right: 0;
            color: #999;
            z-index: 1;
            margin-right: 8px;
        }
        .el-switch__label--right {
            left: 0;
            color: #fff;
            opacity: 0;
            margin-left: 8px;
        }
    }
}
</style>
